<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>委托填报</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body{
            margin:0;
            padding:0;
            font-size:14px;
            background:#FFFFFF;
        }
        a{
            text-decoration:none !important;
            color:#000000;
        }
        .header{
            font-size:16px;
            text-align:center;
            background:#FFFFFF;
            padding:10px 0;
            position:relative;
        }
        .rt_pos{
            position:absolute;
            left:16px;
            top:16px;
            content: "";
            display: inline-block;
            height: 8px;
            width: 8px;
            border-width: 0 0 2px 2px;
            border-color: #000000;
            border-style: solid;
            transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
            -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
        }
        .case_info{
            color:#0E5CC1;
            background:#F8F8F8;
            padding:10px 12px;
        }
        .case_info p{
            margin-top:0;
            margin-bottom:10px;
        }
        .case_info p:last-child{
            margin-bottom:0;
        }

        .case_details_div{
            margin-bottom:60px;
        }
        .case_details_menu{
            padding:20px 8px 20px 8px;
        }
        .details_menu{
            display:inline-block;
            width:19%;
            text-align:center;
        }
        .details_menu_span{
            color:#0E5CC1;
            border-bottom:4px solid #FFFFFF;
            padding-bottom:3px;
        }
        .span_active{
            border-bottom:4px solid #3A78FF;
        }
        .case_details_cont{
            padding:0 12px;
        }
        .case_details_table{
            width:100%;
        }
        .case_details_table tr td:nth-child(1){
            width:22%;
            padding:5px 0 5px 0;
        }
        .button_div{
            text-align:center;
            padding:10px 0 10px 0;
            position:fixed;
            bottom:0;
            left:0;
            right:0;
            background:#FFFFFF;
        }
        .button_span{
            background:#0E5CC1;
            color:#FFFFFF;
            border-top-left-radius:25px;
            border-bottom-left-radius:25px;
            border-top-right-radius:25px;
            border-bottom-right-radius:25px;
            display:inline-block;
            padding:5px 25px 5px 25px;
            font-size:16px;
        }

        .file_div{}
        .file_title{
            width:68%;
            display:inline-block;
            vertical-align:middle;
        }
        .file_img{
            width:30%;
            display:inline-block;
            text-align:center;
            vertical-align:middle;
        }
        .file_img img{
            width:50px;
            height:50px;
            text-align:center;
        }
        .jiancai_div{}
        .jiancai_img{
            width:50px;
            height:50px;
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="header">
        <span class="rt_pos"></span>
        <span>委托填报</span>
    </div>
    <div class="case_info">
        <p>案件名称案件名称案件名称案件名称</p>
        <p>委托编号：HLDAJSK-NLSDJ</p>
        <p>委托时间：<?=date('Y-m-d H:i',time());?></p>
        <p>
            <span style="color:#0E5CC1;">预检员：jasldj</span>&nbsp;
            <span style="color:#0E5CC1;">受理员：fjalskjd</span>&nbsp;
            <span style="color:#0E5CC1;">鉴定员：sjdlakj</span>
        </p>
    </div>
    <div class="case_details_div">
        <div class="case_details_menu">
            <div class="details_menu"><span class="details_menu_span span_active" data-value="1">基本信息</span></div>
            <div class="details_menu"><span class="details_menu_span" data-value="2">鉴定要求</span></div>
            <div class="details_menu"><span class="details_menu_span" data-value="3">案件摘要</span></div>
            <div class="details_menu"><span class="details_menu_span" data-value="4">文件信息</span></div>
            <div class="details_menu"><span class="details_menu_span" data-value="5">检材信息</span></div>
        </div>
        <div class="case_details_cont" id="details_cont_1">
            <table class="case_details_table">
                <tr><td>送检部门：</td><td>12314123</td></tr>
                <tr><td>鉴定部门：</td><td>124123123</td></tr>
                <tr><td>委托人：</td><td>124123123</td></tr>
                <tr><td>联系电话：</td><td></td></tr>
                <tr><td>送检人：</td><td></td></tr>
                <tr><td>联系电话：</td><td></td></tr>
                <tr><td>案件名称：</td><td>12412312312312</td></tr>
                <tr><td>案件编号：</td><td></td></tr>
                <tr><td>案件类型：</td><td></td></tr>
                <tr><td>案件级别：</td><td>231412312312412</td></tr>
                <tr><td>鉴定项目：</td><td></td></tr>
            </table>
        </div>
        <div class="case_details_cont" id="details_cont_2" style="display:none;">鉴定要求鉴定要求鉴定要求鉴定要求鉴定要求鉴定要求鉴定要求</div>
        <div class="case_details_cont" id="details_cont_3" style="display:none;">案件摘要案件摘要案件摘要案件摘要案件摘要案件摘要案件摘要</div>
        <div class="case_details_cont" id="details_cont_4" style="display:none;">
            <div class="file_div">
                <div class="file_title">
                    <p>文件名称</p>
                    <p>文件类型</p>
                </div>
                <div class="file_img">
                    <img src="images/ppt.png">
                </div>
            </div>

            <div class="file_div">
                <div class="file_title">
                    <p>文件名称</p>
                    <p>文件类型</p>
                </div>
                <div class="file_img">
                    <img src="images/photo.png">
                </div>
            </div>

            <div class="file_div">
                <div class="file_title">
                    <p>文件名称</p>
                    <p>文件类型</p>
                </div>
                <div class="file_img">
                    <img src="images/txt.png">
                </div>
            </div>

            <div class="file_div">
                <div class="file_title">
                    <p>文件名称</p>
                    <p>文件类型</p>
                </div>
                <div class="file_img">
                    <img src="images/pdf.png">
                </div>
            </div>

            <div class="file_div">
                <div class="file_title">
                    <p>文件名称</p>
                    <p>文件类型</p>
                </div>
                <div class="file_img">
                    <img src="images/execl.png">
                </div>
            </div>
        </div>
        <div class="case_details_cont" id="details_cont_5" style="display:none;">
            <div class="jiancai_div">
                <p><span>名称：</span><span></span></p>
                <p><span>持有人：</span><span></span></p>
                <p><span>身份证号：</span><span></span></p>
                <p><span>手机号：</span><span></span></p>
                <p><span>品牌：</span><span></span></p>
                <p><span>型号：</span><span></span></p>
                <p><span>颜色：</span><span></span></p>
                <p><span>密码：</span><span></span></p>
                <p><span>IMEI(S/N)：</span><span></span></p>
                <p><span>描述：</span><span></span></p>
                <p>
                    <span class="jiancai_img"><img style="width:100%;" src="images/portrait.png"></span>
                    <span class="jiancai_img"><img style="width:100%;" src="images/portrait.png"></span>
                    <span class="jiancai_img"><img style="width:100%;" src="images/portrait.png"></span>
                </p>
            </div>
            <div class="jiancai_div">
                <p><span>名称：</span><span></span></p>
                <p><span>持有人：</span><span></span></p>
                <p><span>身份证号：</span><span></span></p>
                <p><span>手机号：</span><span></span></p>
                <p><span>品牌：</span><span></span></p>
                <p><span>型号：</span><span></span></p>
                <p><span>颜色：</span><span></span></p>
                <p><span>密码：</span><span></span></p>
                <p><span>IMEI(S/N)：</span><span></span></p>
                <p><span>描述：</span><span></span></p>
                <p>
                    <span class="jiancai_img"><img style="width:100%;" src="images/portrait.png"></span>
                    <span class="jiancai_img"><img style="width:100%;" src="images/portrait.png"></span>
                    <span class="jiancai_img"><img style="width:100%;" src="images/portrait.png"></span>
                </p>
            </div>
        </div>
    </div>
    <div class="button_div">
        <span class="button_span">点击预检</span>
    </div>
</body>

<script src="common/style/js/jquery.min.1.8.1.js"></script>
<script>
    $(function(){
        $('.details_menu_span').click(function(){
            var value = $(this).attr('data-value');
            $('.details_menu_span').removeClass('span_active');
            $(this).addClass('span_active');
            $('.case_details_cont').hide();
            $('#details_cont_'+value).show();
        });
    })
</script>
</html>